<template>
	<view class="container">
		<view class="shopDetail-image">
			<image :src="shopDetail.image"></image>
		</view>
		<view class="shopDetail-detail">
			<view class="shopDetail-detail-left">
				<view class="shopDetail-detail-left-shopName">
					{{shopDetail.shopName}}
				</view>
				<view>
					<view class="shopDetail-detail-left-newPrice">
						<view>
							¥{{shopDetail.newPrice}}
						</view>
						<view style="color: #B7B7B9;">
							库存数量:{{shopDetail.inventory}}
						</view>
					</view>
					<view class="bottom">
						<view v-if="count!=0" class="bottom-button" @click="decreaseCount">
							-
						</view>
						<view v-if="count!=0" style="margin: 0 2vh;">
							{{count}}
						</view>
						<view class="bottom-button" @click="increaseCount">
							+
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="shopDetail-bottom">
			<view>
				商品详情
			</view>
			<view class="shopDetail-bottom-descirption">
				商品描述:{{shopDetail.description}}
			</view>
		</view>
		<view class="shopDatail-comment">
			<view class="shopDetail-comment-top">
				商品评价
			</view>
			<view class="shopDetail-comment-main">

				<view v-for="item in commentList" class="shopDetail-comment-main-item">
					<!-- <view style="flex:1"></view> -->
					<view class="shopDetail-comment-main-item-head">
						<image :src="item.user.image"></image>
					</view>
					<view class="shopDetail-comment-main-item-main">
						<view class="shopDetail-comment-main-item-username">
							{{item.user.name}}
							<view class="shopDetail-comment-main-item-createTime">
								{{item.createTime}}
							</view>
						</view>
						<view>
							<uni-rate :readonly="true" :value="item.storage" />
						</view>
						<view class="shopDetail-comment-main-item-content">
							评论:{{item.content}}
						</view>


					</view>

				</view>
				<view class="goods-carts" v-if="count!=0">
					<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view>
				<view class="goods-carts" v-else>
					<uni-goods-nav :options="options1" :fill="true" :button-group="buttonGroup1" />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getCommentsByShopId
	} from '../../api/comment';
	import {
		placeOrder
	} from '../../api/orders';
	import {
		pay
	} from '../../api/pay';
	import {
		getShopById
	} from '../../api/shop'
	import {
		baseUrl
	} from '../../config';
	export default {
		data() {
			return {
				shopDetail: {},
				commentList: [],

				buttonGroup: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				buttonGroup1: [{
					text: '立即购买',
					backgroundColor: "gray",
					color: '#fff'
				}],
				count: 1
			}
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				var param = {
					"userId": uni.getStorageSync('auth'),
					"shopId": this.shopDetail.id,
					"shopCount": this.count
				}

				console.log(e);
				if (e.content.text) {
					uni.showModal({
						content: "是否购买此物品",
						success(r) {
							if (r.confirm) {
								// 提交订单
								placeOrder(param).then(res => {
									console.log(res);
									uni.navigateTo({
										url: "/pages/pay/pay"
									})

									// if (res.data.code == 1) {
									// 	uni.showToast({
									// 		title: "下单成功",
									// 		icon: "success"
									// 	}).then(res => {
									// 		uni.redirectTo({
									// 			url: "/pages/service/mall"
									// 		})
									// 	})
									// }
								})
							} else {

							}

						},
						fail() {

						}
					})
				}


			},
			increaseCount() {
				if (this.count < this.shopDetail.inventory) {
					this.count = this.count + 1
				} else {
					uni.showToast({
						title: "库存数量不足",
						icon: "error"
					})
				}
			},
			decreaseCount() {
				if (this.count > 0) {
					this.count = this.count - 1
				}
			}
		},
		onLoad(options) {
			getShopById(options.id).then(res => {
				console.log(res);
				res.data.data.image = baseUrl + "/common/download?name=" + res.data.data.image
				this.shopDetail = res.data.data
				getCommentsByShopId(res.data.data.id).then(res => {
					console.log("用户评论");
					console.log(res);
					for (var i = 0; i < res.data.data.length; i++) {
						res.data.data[i].user.image = baseUrl + "/common/download?name=" + res.data.data[i]
							.user.image
					}
					this.commentList = res.data.data
				})
			})
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
	}

	.shopDetail-image {
		width: 100%;
		height: 60vh;
	}

	.shopDetail-image image {
		width: 100%;
		height: 100%;
	}

	.shopDetail-detail {
		height: 16vh;
		display: flex;
	}

	.shopDetail-detail-left {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 3vh;
		padding-right: 3vh;
		margin-top: 1vh;
		background-color: white;
	}

	.shopDetail-detail-right {
		/* background-color: green; */
		flex: 1;
	}

	.shopDetail-detail-right-buy {
		font-size: 5vh;
		color: white;
		background-color: red;
		text-align: center;
		height: 100%;
		line-height: 300%;
	}

	.shopDetail-detail-left-shopName {
		font-size: 2vh;
		line-height: 5vh;

	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}


	.shopDetail-detail-left-oldPrice {
		color: red;

		font-size: 3vh;
		line-height: 5vh;

		flex: 1;
	}

	.bottom {
		display: flex;
		justify-content: flex-end;
		line-height: 4vh;
		height: 4vh;

	}

	.bottom-button {
		background-color: orange;
		height: 4vh;
		width: 4vh;
		text-align: center;
		line-height: 3.6vh;
		border-radius: 50%;
		margin-right: 0 4vh;
		font-size: 4vh;
	}

	.shopDetail-detail-left-newPrice {
		display: flex;
		font-size: 2vh;
		color: #9ED4A1;
		justify-content: space-between;
		flex: 1;
	}

	.shopDetail-bottom {
		background-color: white;
		margin-top: 4vh;
		padding: 4vh;
		display: flex;
		flex-direction: column;
	}

	.shopDetail-bottom-descirption {
		margin-top: 2vh;
	}

	.shopDatail-comment {
		width: 100%;
		display: flex;
		background-color: white;
		flex-direction: column;
		font-size: 2vh;
	}

	.shopDetail-comment-main {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 4vh;

	}

	.shopDetail-comment-main-item {
		width: 80%;
		display: flex;
		margin: 2vh auto;
	}

	.shopDetail-comment-main-item-head {
		width: 6vh;
		height: 6vh;
		flex: 1;
		position: relative;
		top: 1vh;

	}

	.shopDetail-comment-main-item-main {
		padding: 1vh;
		width: 80%;
		flex: 5;

	}

	.shopDetail-comment-main-item-head image {
		width: 100%;
		height: 100%;
	}

	.shopDetail-comment-main-item-username {
		display: flex;
		justify-content: space-between;
	}
</style>